<template>
    <div class="header-container">
        <div class="header-left flex-box">
            <el-icon class="icon" size="20" @click="handleOpen">
                <Fold />
            </el-icon>
            <ul class="flex-box">
                <li v-for="item in selectMenu" :key="item.path" class="tab flex-box"
                    :class="{ selected: route.path === item.path }">
                    <el-icon size="12">
                        <component :is="item.icon" />
                    </el-icon>
                    <!-- 使用标签进行 router 进行路由跳转 -->
                    <router-link :to="item.path">
                        {{ item.name }}
                    </router-link>
                    <el-icon size="12" class="close" @click="closeTab(item)">
                        <Close />
                    </el-icon>
                </li>
            </ul>
        </div>
        <div class="header-right">
            <el-dropdown @command="handleChlick">
                <div class="el-dropdown-link flex-box">
                    <el-avatar :src="userInfo.avatar" />
                    <p class="userName">{{ userInfo.name }}</p>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="cancel">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup lang="ts">
import { CounterStore } from '../store/index'
import { useRoute, useRouter } from 'vue-router'
import type { MenuType } from '../router/routerType'
const store = CounterStore();

const handleOpen = () => {
    store.state.isCollapse = !store.state.isCollapse
}
// 拿到pinia中selectMenu的数据
const selectMenu = store.state.selectMenu;

// 获取本地缓存的用户信息
const userInfo = JSON.parse(localStorage.getItem('pz_userInfo') || '{}')
// 当前路由对象
const route = useRoute();
const router = useRouter();
const closeTab = (item: MenuType) => {
    // 找到点击数据的索引
    const index = store.state.selectMenu.findIndex((val: { name: string; }) => val.name === item.name)
    // 通过索引删除数组指定的对象  (删除的位置，删除的个数)
    store.state.selectMenu.splice(index, 1)
    // 删除非当前页tag
    if (route.path !== item.path) {
        return
    }
    const selectMenuData = store.state.selectMenu
    // 如果删除最后一项
    if (index === selectMenuData.length) {
        // 如果数组只有一个元素
        if (!selectMenuData.length) {
            router.push('/')
        } else {
            router.push({
                path: selectMenuData[index - 1].path
            })
        }
    } else {
        // 如果删除的是中间位置
        router.push({
            path: selectMenuData[index].path
        })
    }
}

// 下拉菜单点击
const handleChlick = (command: string) => {
    if (command === 'cancel') {
        // 退出逻辑
        localStorage.removeItem('pz_token')
        localStorage.removeItem('pz_userInfo')
        localStorage.removeItem('pz_v3pz')

        // 路由跳转
        window.location.href = window.location.origin
    }
}
</script>

<style scoped lang="less">
.flex-box {
    display: flex;
    align-items: center;
    height: 100%;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    height: 100%;
    padding-right: 20px;

    .header-left {
        height: 100%;

        .icon {
            width: 40px;
            height: 100%;
        }

        .icon:hover {
            background-color: #f3f3f3;
            cursor: pointer;
        }

        .tab {
            height: 100%;
            padding: 0 10px;

            .text {
                margin: 0 5px;
            }

            .close {
                // 默认隐藏，但盒子存在
                visibility: hidden;
            }

            // 同级
            &.selected {
                background-color: #f5f5f5;

                a {
                    color: #409eff;
                }

                i {
                    color: #409eff;
                }
            }
        }

        .tab:hover {
            background-color: #f5f5f5;

            .close {
                visibility: inherit;
                cursor: pointer;
                color: #000;
            }
        }
    }

    .header-right {
        height: 100%;

        .userName {
            margin-left: 10px;
        }
    }

    a {
        color: #333;
        font-size: 15px;
    }

}
</style>